<template>
	<vxe-modal
		v-model="dialog"
		title="页面JSON"
		id="pageJson"
		className="pageJson"
		width="1000"
		height="600"
		@close="cancel"
		@confirm="cancel"
		show-footer
		show-zoom>
		<template #default>
			<div class="code">
				<codemirror ref="myCm" :value="json" :options="cmOptions"></codemirror>
			</div>
		</template>
	</vxe-modal>
</template>

<script>
import { codemirror } from "vue-codemirror";
import 'codemirror/mode/javascript/javascript' // 这js模式必须引入的
import 'codemirror/lib/codemirror.css'
// 折叠
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/foldcode'
import 'codemirror/addon/fold/foldgutter'
import 'codemirror/addon/fold/brace-fold'
import 'codemirror/addon/fold/comment-fold'
import 'codemirror/addon/lint/json-lint'

export default {
  name: 'codeJson',
  components: {
	codemirror
  },
  props: {
    dialog: {
		type: Boolean,
		default: false
	},
	info: {
		type: Object,
		default: () => {}
	}
  },
  data() {
	return {
		json: this.info,
		editor: '',
		cmOptions: {
			tabSize: 4,
			mode: "application/json",
			theme: "default",
			lineNumbers: true,
			line: true,
			autoCloseBrackets: true,
			showCursorWhenSelecting: true,
			readOnly: false,
			foldGutter: true,
			lineWrapping: true,
			gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
		}
	}
  },
  created() {
		this.json = JSON.stringify(this.info, null, "\t")
		// console.log(this.json)
  },
  methods: {
	cancel() { 
		this.$emit('close')
	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.pageJson /deep/ .CodeMirror {
		height: 480px
	}
</style>
